.vega-embed {
  width: 100%;
  height: 100%;
}

#vg-tooltip-element,
#rill-vg-tooltip {
  @apply absolute border p-3 rounded-lg pointer-events-none;
  @apply ui-copy-number;
  background: light-dark(rgba(255, 255, 255, 0.95), rgba(30, 30, 30, 0.95));
  border-color: light-dark(rgb(203 213 225), rgb(71 85 105));
  /* slate-300 / slate-600 */
  color: light-dark(rgb(15 23 42), rgb(226 232 240));
  /* slate-900 / slate-200 */
  font-family: "Inter";
  border-radius: 5px;

  & h2 {
    @apply text-sm font-semibold mb-2;
    color: light-dark(rgb(100 116 139), rgb(148 163 184));
    /* slate-500 / slate-400 */
  }

  & table {
    @apply border-spacing-0;
  }

  & table tr td {
    @apply truncate py-0.5;
  }

  & table tr td.key {
    @apply flex items-center gap-x-1;
    @apply text-left px-1 font-normal truncate text-xs;
    color: light-dark(rgb(71 85 105), rgb(148 163 184));
    /* slate-600 / slate-400 */
    max-width: 250px;
  }

  & table tr td.value {
    @apply text-left truncate font-semibold text-xs;
    max-width: 250px;
  }

  & table tr .key-color {
    @apply w-3 h-3 min-w-3 min-h-3 rounded-full inline-block;
  }
}

#vg-tooltip-element table tr:first-child td:first-child {
  display: none;
}

#vg-tooltip-element table tr {
  @apply flex justify-between gap-x-3;
}

#vg-tooltip-element table tr:first-child td {
  font-size: 14px;
  margin-left: 2px;
  margin-bottom: 4px;
}
